<template>
  <page-frame>
    <div class="serviceRecordInfo">
      <div class="toptitle">
        <div class="left">服务记录- 服务记录详情</div>
        <div class="right">
          <div class="btns">
            <router-link :to="{name: 'serviceRecord'}"><el-button>返回</el-button></router-link>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-form :model="ruleForm" ref="ruleForm" :label-position="labelPosition" label-width="80px" class="demo-ruleForm">
          <div class="panel">
            <div class="panel-title first">
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="grid-content bg-purple">基本信息</div>
                </el-col>
              </el-row>
            </div>
            <div class="panel-content">
              <el-row>
                <el-col :span="10" :offset="1">
                  <el-form-item label="服务对象" prop="memberName">
                    <el-input v-model="ruleForm.memberName" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                  <el-form-item label="服务项目" prop="serviceName">
                    <el-input v-model="ruleForm.serviceName" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10"  :offset="1">
                  <el-form-item label="服务人员" prop="emName">
                    <el-input v-model="ruleForm.emName" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                  <el-form-item label="服务时间" prop="time">
                    <!--<el-date-picker-->
                      <!--v-model="ruleForm.time"-->
                      <!--type="datetimerange"-->
                      <!--disabled-->
                      <!--placeholder="选择服务时间">-->
                    <!--</el-date-picker>-->
                    <el-input v-model="ruleForm.time" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :offset="1">
                  <el-form-item label="备注" prop="remark">
                    <el-input
                      placeholder="备注"
                      v-model="ruleForm.remark"
                      style="width:86%!important;"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :offset="1" :span="10" v-for="item in ruleForm.recordInfoDTOs">
                  <el-form-item :label="item.content">
                    <el-input
                      placeholder="备注"
                      v-model="item.value"
                      style="width:86%!important;"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
    </div>
  </page-frame>
</template>

<script >
  import seviceRecordApi from '../../service/serManagement/recordApi';
  export default {
    data () {
      return {
        formLabelWidth:'100px',
        labelPosition: 'right',
        currentWorkId:null,
        ruleForm:{
          memberName:'',
          serviceName:'',
          time:'',
          emName:'',
          content:'',
        },
      }
    },

    methods: {
      init() {
        this.currentWorkId = this.$route.params.workId;
        this.getDetailInfo(this.currentWorkId);
      },
      /**
       * 加载数据
       */
      getDetailInfo(recordId){
        let self = this;
        seviceRecordApi.getSevicePlanDetailInfo(recordId).then(
          (response)=>{
          self.ruleForm = response.data.data;
          self.ruleForm.time = response.data.data.planTimeEnd.substring(0,19);
          }
        );
      },
    },

    mounted: function () {
      this.init();
    },
  }
</script>
<style>
  .serviceRecordInfo .el-form{
    width: 80%;
  }
  .serviceRecordInfo .el-input{
    width:100%!important;
  }
</style>
